<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<div id="app">
    <form action="" method="post">
        <p>名称:<input type="text" v-model="book.bookName"/></p>
        <p>作者:<input type="text" v-model="book.bookAuthor"/></p>
        <p>价格:<input type="text" v-model="book.bookPrice"/></p>
        <p>图片:
            <br/>
            <img :src="book.bookImg" height="100"/><br/>
            <input type="file" id="bookImgFile" @change="doFileUpload"/>
        </p>
        <p>日期:<input type="text" v-model="book.bookDate"/></p>
        <p>描述:<input type="text" v-model="book.bookDesc"/></p>
        <p><input type="button" @click="doSubmit" value="提交"/></p>
    </form>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/axios.min.js"></script>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            book:{
                bookName:"",
                bookAuthor:"",
                bookPrice:"",
                bookImg:"",
                bookDate:"",
                bookDesc:""
            }
        },
        methods:{
            doFileUpload(){
                //封装文件到FormData对象
                let formData = new FormData();
                let fileInput = document.getElementById("bookImgFile");
                formData.append("file",fileInput.files[0]);
                //执行提交
                axios({
                    url:"/file/upload",
                    method:"post",
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    },
                    data:formData
                }).then(res=>{
                    let vo = res.data;
                    if(vo.code == 1){
                        this.book.bookImg = vo.data;
                    }
                });
            },
            doSubmit(){
                axios({
                    url:"/book/add",
                    method: "post",
                    data:this.book
                }).then(res=>{
                    let vo = res.data;
                    alert(vo.msg);
                    if(vo.code == 1){
                        this.book = {};
                    }
                });
            }
        }
    });
</script>

</body>
</html>